<template>
	<view class="page">
		<uni-nav-bar ref="navBar" fixed statusBar title="商品管理" :border="false" backgroundColor="#ffffff"
			@clickLeft="goBack">
			<template v-slot:left>
				<image src="@/static/svg/publicSvg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<view v-if="isOwn">
			<view class="menu-list flex item-center justify-between">
				<view class="menu-item" v-for="item in menuList" :key="item.id" @click="changeMenu(item)"
					:class="{ 'active': item.id === activeMenu }">
					{{ item.name }}
					<view class="sel-line" v-if="item.id == activeMenu"></view>
				</view>
			</view>
			<view>
				<own-merchant v-if="activeMenu === 1" />
				<business-merchant v-if="activeMenu === 2" />
			</view>
		</view>
		<view v-else>
			<own-merchant />
		</view>
	</view>
</template>

<script setup name="Goods">
import OwnMerchant from './OwnMerchant.vue'
import BusinessMerchant from './BusinessMerchant.vue'

import {
	onMounted,
	reactive,
	ref,
	computed
} from 'vue'
import {
	useUserStore
} from '@/stores/modules/user.js'

const goBack = () => {
	if (getCurrentPages().length === 1) {
		uni.reLaunch({
			url: "/homePages/pages/home/home"
		});
		return;
	}
	uni.navigateBack()
}

const userStore = useUserStore()

const activeMenu = ref(1);
let menuList = reactive([
	{
		name: '自营商品',
		id: 1
	},
	{
		name: '商户商品',
		id: 2
	},
])
const isOwn = computed(() => userStore.isOwn)

const changeMenu = (menu) => {
	activeMenu.value = menu.id;
}

onMounted(() => {
	userStore.getUserInfo()
})
</script>

<style lang="scss" scoped>
.page {
	position: relative;
	height: 100vh;
	width: 100vw;
}

.menu-item {
	width: 50%;
	margin: 10px 20px 4px 20px;
	padding: 10px 0;
	color: #333333;
	position: relative;
	text-align: center;
	translate: color 0.3s;
	
	&.active {
		color:#FA4543;
	}

	.sel-line {
		position: absolute;
		width: 60%;
		height: 4px;
		border-radius: 4px;
		background: #FA4543;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
}
</style>